<template>
  <intro-view :usage="usage">
    <div ref="page" style="height: 100%; overflow: hidden">
      <ui-better-scroll style="height: 100%; overflow: hidden;">
        <ui-cascade-select :data="data1" title="请选择"></ui-cascade-select>
        <hr>
        <ui-cascade-select :data="data2"></ui-cascade-select>
        <hr>
        <button @click="showCascadeSelect">showCascadeSelectDialog</button>
      </ui-better-scroll>
    </div>
  </intro-view>
</template>

<script>
  import usage from './usage.md'
  export default {
    data () {
      return {
        usage,
        data1: [],
        data2: []
      }
    },
    methods: {
      showCascadeSelect () {
        this.$UiCascadeSelectDialog.new({
          onEl: this.$refs['page'],
          // value: [],
          data: [
            [
              { value: 'a', children: [{value: 'a1', children: [{value: 'a11'}, {value: 'a12'}, {value: 'a13'}]}] },
              { value: 'b', children: [{value: 'b1'}, {value: 'b2'}] },
              { value: 'c', children: [{value: 'c1', children: [{value: 'c11', children: [{value: 'c111'}]}, {value: 'c12'}, {value: 'c13'}]}] },
              { value: 'd' }
            ]
          ],
          selectOption: async (option) => {
            if (option.value === 'd') {
              return new Promise(resolve => {
                setTimeout(() => {
                  resolve(this.$set(option, 'children', [{value: 'd1'}]))
                })
              })
            }
          },
          // 点击确定回调地址
          callback: (value) => { console.log(value) }
        })
      }
    },
    mounted () {
      setTimeout(() => {
        let data1 = [{value: '1'}, {value: '2'}, {value: '3'}, {value: '4'}, {value: '5'}, {value: '6', disabled: true}, {value: '7'}, {value: '8'}]
        let data2 = [{value: 'a'}, {value: 'b'}, {value: 'c'}, {value: 'd'}, {value: 'e'}, {value: 'f'}, {value: 'g'}]
        let dataCas = [
          { value: 'a', children: [{value: 'a1', children: [{value: 'a11'}, {value: 'a12'}, {value: 'a13'}]}] },
          { value: 'b', children: [{value: 'b1'}, {value: 'b2'}] },
          { value: 'c', children: [{value: 'c1', children: [{value: 'c11', children: [{value: 'c111', children: [{value: 'c1111'}]}]}, {value: 'c12'}, {value: 'c13'}]}] }
        ]
        this.data1 = [data1, data2]
        this.data2 = [dataCas]
      })
    }
  }
</script>
